{extend name="$_admin_base_layout" /}

{block name="style"}
<link href="__LIBS__/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css" />
{/block}

{block name="content"}
    <div class="row">
        <div class="col-md-12">
            <div class="block">
                <form action="{:url('dosave')}" name="form-builder" method="post" class="form-horizontal form-builder">
                    <div class="block-content tab-content">
                        <div class="tab-pane fade in active push-20">
                            {notempty name="areas"}
                                {volist name="areas" id="area"}
                                <div class="block block-bordered">
                                    <div class="block-header bg-gray-lighter auth-node-top" data-id="{$area.id}">
                                        <label class="css-input css-checkbox css-checkbox-primary">
                                            <input type="checkbox" name="area_node[]" value="{$area.id}" {in name="area['id']" value="$deliveryarea" }checked{/in} class="js-check-all-node"><span></span> <i class="fa fa-fw fa-folder"></i>{$area.name}
                                        </label>
                                    </div>
                                    <div class="block-content" id="area_{$area.id}" style="display:none;">
                                        {notempty name="area.child"}
                                        {volist name="area.child" id="subarea"}
                                        <div class="auth-node-parent">
                                            <div class="subblock-header" data-id="{$subarea.id}">
                                                <label class="css-input css-checkbox css-checkbox-primary">
                                                    <input type="checkbox" name="area_node[]" {in name="subarea['id']" value="$deliveryarea" }checked{/in} data-parent-id="{$area['id']}" value="{$subarea.id}" class="js-check-all-group"><span></span> {$subarea.name}
                                                </label>
                                            </div>
                                        </div>
                                        {/volist}
                                        {/notempty}
                                    </div>
                                </div>
                                {/volist}
                            {/notempty}
                        </div>
                        <input type="hidden" name="warehouseid" value="{$warehouseid}" />
                        <div class="push-20">
                            <button class="btn btn-minw btn-primary ajax-post" target-form="form-builder" type="submit">
                                确定
                            </button>
                            <button class="btn btn-default" type="button" onclick="javascript:history.back(-1);return false;">
                                返回
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{/block}

{block name="script"}
<script>
    $(document).ready(function(){
        // 全选或反选
        $('.js-check-all-node').change(function () {
            $(this).closest('.block').find('.block-content input:checkbox').prop('checked',this.checked);
        });
        $('.js-check-all-group').change(function () {
            $(this).closest('.auth-node-parent').find('.auth-node-child input:checkbox').prop('checked',this.checked);
        });
        $('.js-check-all-row').change(function () {
            $(this).closest('.auth-node-row').find('.auth-node-child input:checkbox').prop('checked',this.checked);
        });
        $('.block-header').click(function(){
            var dataid=$(this).data('id');
            if($("#area_"+dataid).css('display')=='none'){
                $("#area_"+dataid).show();
                $(this).find("i").removeClass("fa-folder").addClass("fa-folder-open");
            }else{
                $("#area_"+dataid).hide();
                $(this).find("i").removeClass("fa-folder-open").addClass("fa-folder");
            }
        })

        // 自动选中父节点
        var check_parent = function (id) {
            var self = $('input:checkbox[value="'+id+'"]');
            var pid = self.data('parent-id') || '';
            self.prop('checked', true);

            if (pid == '') {
                return false;
            }
            check_parent(pid);
        };
        $('input[name="area_node[]"]').change(function () {
            if (this.checked) {
                var $parnet_id = $(this).data('parent-id') || '';
                check_parent($parnet_id);
            }
        });
    });
</script>
{/block}
